{% extends 'base.html' %}
{% block title %}
    <title>个人中心</title>
{% endblock %}

{% block body %}
<!--    <p>{{ cs }}</p>-->
<!--    {% for b in cs %}-->
<!--        {{ b }}-{{ forloop.first }}-->
<!--    {% endfor %}-->

{% block css %}
<style>
    .head{
        width:100px;
        height:100px;
        position: relative;
    }
    .head img{
        width:100%;
        height:100%;
        position: absolute;
        z-index: 90;
        border-radius:50%;
    }
    .head input{
        width:100%;
        height:100%;
        position: absolute;
        z-index: 100;
        opacity: 0;
    }
</style>
{% endblock %}

{% block js %}
<script>
    window.onload = function(){
    let head_input = document.querySelector(".head input");
    let head_img = document.querySelector(".head img");
    head_input.onchange = function(){
        const file = head_input.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function (e) {
                head_img.src = e.target.result; // 设置预览图像源
            }
            reader.readAsDataURL(file)  //读取文件
        }
    }
}

</script>
{% endblock %}

    <h1>这里是个人中心</h1>
    /* enctype="multipart/form-data"用于上传文件以及发送大量数据 */
<form action="" method="post" enctype="multipart/form-data">
  {% csrf_token %}
    <div class="form-group">
        {{ cf.head.label_tag }}
        <div class="head">
            {{ cf.head }}
        <img src="/media/{{ request.user.head }}">
        </div>
    </div>
    <div class="form-group">
        {{ cf.username.label_tag }}
        {{ cf.username }}
    </div>
    <div class="form-group">
        {{ cf.email.label_tag }}
        {{ cf.email }}
    </div>
    <div class="form-group">
        {{ cf.telephone.label_tag }}
        {{ cf.telephone }}
    </div>
    <div class="form-group">
        {{ cf.first_name.label_tag }}
        {{ cf.first_name }}
    </div>
    <div class="form-group">
        {{ cf.last_name.label_tag }}
        {{ cf.last_name }}
    </div>

  <button type="submit" class="btn btn-primary">确认修改</button>

</form>




{% endblock %}